<template>
  <div class="login-wrapper">
    <h1>企业人事管理系统</h1>
    <div class="login-container">
      <div class="login-header">
        <!-- <img
        src="http://wuyao.ink/static/upload/2022-4-2-15-31-31-163-e9b4e.jpg"
        alt=""
        class="logo"
      /> -->
        <h3 class="title">通过账号密码登录</h3>
      </div>
      <!-- 表单 -->
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
      >
        <!-- 用户名 -->
        <a-form-item
          label="用户名"
          name="accountName"
          hasFeedback
          :rules="[
            { required: true, message: '用户名不能为空' },
            { min: 6, message: '用户名长度不能小于6位' },
            { max: 16, message: '用户名长度不能大于16位' },
            { pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能包含数字和字母' }
          ]"
        >
          <a-input v-model:value="formState.accountName">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <!-- 密码 -->
        <a-form-item
          label="密　码"
          name="accountPassword"
          hasFeedback
          :rules="[
            { required: true, message: '密码不能为空' },
            { min: 6, message: '密码长度不能小于6位' },
            { max: 16, message: '密码长度不能大于16位' }
          ]"
        >
          <a-input-password v-model:value="formState.accountPassword">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <!-- 记住密码-忘记密码 -->
        <a-form-item>
          <a-form-item name="remember" no-style>
            <a-checkbox :checked="formState.remember">记住密码</a-checkbox>
          </a-form-item>
          <!-- <a class="login-form-forgot" href="">忘记密码?</a> -->
          <router-link to="/user/forgetPassword" class="login-form-forgot"
            >忘记密码?</router-link
          >
        </a-form-item>

        <!-- 登录 -->
        <a-form-item>
          <a-button
            :disabled="disabled"
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive, computed, toRaw } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { useUserStore } from "@/store/user";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
interface FormState {
  accountName: string;
  accountPassword: string;
  remember: boolean;
}
const formState = reactive<FormState>({
  accountName: "",
  accountPassword: "",
  remember: true
});
// 实例化userStore
const userStore = useUserStore();
// 实例化路由
const router = useRouter();

// 提交成功
const onFinish = async (values: any) => {
  const bool = await userStore.actionLogin(
    values.accountName,
    values.accountPassword
  );
  // 判断是否登录成功
  if (bool) {
    const identity = toRaw(userStore.userInfo.identity);
    const hasRoute = await userStore.actionGetRouteList(identity);
    const routeListStr = sessionStorage.getItem("routeList") || "";
    const routeList = JSON.parse(routeListStr) || [];
    if (hasRoute) {
      // 提示成功，并进行跳转页面
      message.success("登录成功，即将跳转到后台管理页面");
      // 延迟跳转
      setTimeout(() => {
        router.push({ path: routeList[0].route });
      }, 1500);
      return;
    }
  }
  // 提示失败
  message.error("登录失败，请重新尝试");
  return;
};

const disabled = computed(() => {
  return !(formState.accountName && formState.accountPassword);
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
